﻿@{ 
    bool isMobile = "1".Equals(ViewData["ismobile"].ToString());
}
<form>
    @Html.AntiForgeryToken()
    <div id="tabdiv">
        <div id="div_upload" title="&nbsp;&nbsp;上传文件&nbsp;&nbsp;">
            <link href="~/RoadFlowResources/scripts/webuploader/webuploader.css" rel="stylesheet" />
            <script type="text/javascript" src="~/RoadFlowResources/scripts/webuploader/webuploader.nolog.min.js"></script>
            <div id="uploader" style="margin:6px;">
                <div>
                    <div id="picker" style="float:left;">选择要上传文件</div>
                    <button type="button" class="uploadbut" style="height: 31px;" onclick="confirm1();">&nbsp;&nbsp;确&nbsp;&nbsp;定&nbsp;&nbsp;</button>
                </div>
                <div id="thelist" class="filelist" style="height:@(isMobile?"225":"370")px">

                </div>
            </div>
        </div>
        @if ("1".Equals(ViewData["isselectuserfile"].ToString()))
        {
        <div id="div_myfile" title="选择我的文件">
            <iframe frameborder="0" border="0" style="border:none 0;width:100%;height:@(isMobile ? "272" : "410")px" src="~/RoadFlowCore/UserFile/Index?isselect=1&ismobile=@ViewData["ismobile"]"></iframe>
        </div>
        }
    </div>
</form>
<script type="text/javascript">
    var eid = '@ViewData["eid"]';
    var values = @Html.Raw(ViewData["values"]);
    var filetype = "@ViewData["fileType"]";
    var showFileWidth = "@(isMobile?400:1000)";
    var filepath = "@ViewData["filepath"]";//文件管理上传文件
    var isUserFile = $.trim(filepath).length > 0;
    
    $(function ()
    {
        new RoadUI.Tab({ id: "tabdiv", replace: true, contextmenu: false, dblclickclose: false });
        for (var i = 0; i < values.length; i++)
        {
            addFile(values[i], false);
        }
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../../RoadFlowResources/scripts/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: isUserFile ? 'UserFiles_Save' : 'UploadFiles_Save',
            // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            //选择文件后自动上传
            auto: true,
            //分片上传大文件
            chunked: false,
            // 每块文件大小（默认5M）
            chunkSize: 5 * 1024 * 1024,
            // 开启几个并非线程（默认3个）
            threads: 3,
            // 在上传当前文件时，准备好下一个文件
            prepareNextFile: true,
            // 只允许选择图片文件。
            //accept: {
            //    title: filetype,
            //    extensions: '',
            //    mimeTypes: 'image/*'
            //},
            //其他参数
            formData: { "userid": "@ViewData["userId"]", "filepath": filepath, "filetype": filetype, "__RequestVerificationToken": $("input[name='__RequestVerificationToken']").val() }
        });
        $("#ctlBtn").bind('click', function ()
        {
            uploader.upload();
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file)
        {
            if (isImgFile(file.name))
            {
                var $item = $('<div id="' + file.id + '" class="fileitem">' +
                    '<div class="fileitemname"><img src="" width="108" height="86" /></div>' +
                    '<div class="fileitemstate"><div class="fileitemstatebg"></div><div class="fileitemstateword">等待上传</div></div>' +
                    '</div>');
                uploader.makeThumb(file, function (error, src)
                {
                    if (!error)
                    {
                        $item.find("img").attr("src", src);
                    }
                }, 98, 68);
                $("#thelist").append($item);
            } else
            {
                var $item = $('<div id="' + file.id + '" class="fileitem">' +
                    '<div class="fileitemname">' + file.name + '</div>' +
                    '<div class="fileitemstate"><div class="fileitemstatebg"></div><div class="fileitemstateword">等待上传</div></div>' +
                    '</div>');
                $("#thelist").append($item);
            }

        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage)
        {
            $("#" + file.id).find('.fileitemstateword').text('已上传' + Math.round(percentage * 100) + '%');
        });

        uploader.on('uploadSuccess', function (file, response)
        {
            if (response.error)
            {
                $("#" + file.id).find('.fileitemstateword').html('<span style="color:red;font-weight:bold;">' + response.error + '</span>');
            } else
            {
                var $fid = $("#" + file.id);
                $fid.attr("issuccess", "1");
                $fid.attr("path", response.id);
                $fid.find('.fileitemstateword').html(response.size + '<a href="javascript:;" onclick="delFile(\'' + response.id + '\', this);"><i title="删除" style="font-size:14px;margin-left:4px;" class="fa fa-trash-o"></i></a>');
                $fid.find(".fileitemname").css({ "cursor": "pointer" }).bind("click", function ()
                {
                    RoadUI.Core.open("ShowFile?file=" + response.id + (isUserFile ? "&fullpath=1" : ""), showFileWidth, 500, "显示文件");
                });
            }
        });
        uploader.on('error', function (type)
        {
            //alert(type);
        });
        uploader.on('uploadError', function (file, response)
        {
            $("#" + file.id).find('.fileitemstateword').text(response.error);
        });

        uploader.on('uploadComplete', function (file)
        {
            //$('#' + file.id).find('.progress').fadeOut();
        });
        //所有文件上传完成发生
        uploader.on('uploadFinished', function ()
        {

        });
    });
    //添加文件 isSelectUserFile:是否是从我的文件中选择添加
    function addFile(file, isSelectUserFile) {
        if ($("#" + file.id).size() > 0) {
            return;
        }
        var $thelist = $("#thelist");
        var fileName = file.name;
        var fileId = file.id;
        var size = file.size;
        if (isImgFile(fileName)) {
            var $item = $('<div id="' + fileId + '" path="' + fileId + '" issuccess="1" class="fileitem">' +
                '<div class="fileitemname" style="cursor:pointer;" onclick="RoadUI.Core.open(\'ShowFile?file=' + fileId + '\',' + showFileWidth + ',500,\'\');" title="' + fileName + '">'
                + '<img src="ShowFile?file=' + fileId + '"/>' + '</div>' +
                '<div class="fileitemstate"><div class="fileitemstatebg"></div><div class="fileitemstateword">'
                + size + '<a href="javascript:;" onclick="delUserFile(\'' + fileId + '\', this);"><i title="删除" style="font-size:14px;margin-left:4px;" class="fa fa-trash-o"></i></a>' + '</div></div>' +
                '</div>');
            $thelist.append($item);
        } else {
            var $item = $('<div id="' + fileId + '" path="' + fileId + '" issuccess="1" class="fileitem">' +
                '<div class="fileitemname" style="cursor:pointer;" onclick="RoadUI.Core.open(\'ShowFile?file=' + fileId + '\',' + showFileWidth + ',500,\'\');">' + fileName + '</div>' +
                '<div class="fileitemstate"><div class="fileitemstatebg"></div><div class="fileitemstateword">'
                + size + '<a href="javascript:;" onclick="delUserFile(\'' + fileId + '\', this);"><i title="删除" style="font-size:14px;margin-left:4px;" class="fa fa-trash-o"></i></a>' + '</div></div>' +
                '</div>');
            $("#thelist").append($item);
        }
    }
    //删除从我的文件中选择的文件
    function delUserFile(fileId, a) {
        if (a) {
            $(a).parent().parent().parent().remove();
        } else {
            $("#" + fileId).remove();
        }
    }
    //判断是否为图片文件
    function isImgFile(fileName)
    {
        if (!fileName || fileName.indexOf('.') < 0)
        {
            return false;
        }
        var fileExtName = fileName.substr(fileName.lastIndexOf('.')).toLowerCase();
        if (fileExtName == ".jpg" || fileExtName == ".png" || fileExtName == ".gif" || fileExtName == ".jpeg" || fileExtName == ".bmp")
        {
            return true;
        } else
        {
            return false;
        }
    }

    function delFile(fileId, a)
    {
        if (!confirm('您真的要删除该文件吗?'))
        {
            return;
        }
        var $div = $(a).parent().parent().parent();
        $.ajax({
            url: "DeleteFile",
            data: { "file": fileId, "fullpath": isUserFile ? "1" : "0", "__RequestVerificationToken": $("input[name='__RequestVerificationToken']").val() },
            type: "post",
            async: false,
            success: function (txt)
            {
                if ("1" != txt)
                {
                    alert(txt);
                }
                $div.remove();
            }
        });
    }

    function confirm1()
    {
        var files = new Array();
        var win = new RoadUI.Window();
        $("[issuccess='1']", $("#thelist")).each(function ()
        {
            var path = $(this).attr("path");
            if (path)
            {
                files.push(path);
            }
        })
        if (isUserFile) { //如果是从文件管理中上传的文件
            parent.location = parent.location;
            win.close();
            return;
        }
        var ele = win.getOpenerElement(eid);
        var ele1 = win.getOpenerElement(eid + "_text");
        if (ele1 != null && ele1.size() > 0)
        {
            if (files.length == 0)
            {
                ele1.val('');
            } else
            {
                ele1.val('共' + files.length + '个文件');
            }
        }
        if (ele != null && ele.size() > 0)
        {
            ele.val(files.join('|'));
        } else
        {
            ele.val('');
        }
        win.close();
    }
</script>